<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <title>数据表格页面</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/bootstrap-responsive.min.css}"/>
<!--    <link rel="stylesheet" th:href="@{/css/fullcalendar.css}"/>-->
    <link rel="stylesheet" th:href="@{/css/uniform.css}"/>
    <link rel="stylesheet" th:href="@{/css/select2.css}"/>
    <link rel="stylesheet" th:href="@{/css/matrix-style.css}"/>
    <link rel="stylesheet" th:href="@{/css/matrix-media.css}"/>
    <link th:href="@{/font-awesome/css/font-awesome.css}" rel="stylesheet}"/>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>

    <link th:href="@{/css/materialdesignicons.min.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/js/jquery-tags-input/jquery.tagsinput.min.css}">
    <link th:href="@{/css/style.min.css}" rel="stylesheet">

    <script th:src="@{/js/jquery.js}"></script>
    <script th:src="@{/js/echarts.min.js}" type="text/javascript">

    </script>
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/perfect-scrollbar.min.js}"></script>
    <!--标签插件-->
    <script th:src="@{/js/jquery-tags-input/jquery.tagsinput.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/main.min.js}"></script>
</head>
<body onload="load()">
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <aside class="lyear-layout-sidebar">

            <!-- logo -->
            <div id="logo" class="sidebar-header">
                <a href="index.html"><img th:src="@{/images/00000.png}" title="LightYear" alt="LightYear"/></a>
            </div>
            <div class="lyear-layout-sidebar-scroll">

                <nav class="sidebar-main">
                    <ul class="nav nav-drawer">
                        <li class="nav-item"><a th:href="@{/main/index}"><i class="mdi mdi-home"></i> 后台首页</a></li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-palette"></i>人事系统</a>
                            <ul class="nav nav-subnav">
                                <li><a th:href="@{/emp/emps}">员工信息管理</a></li>
                                <li><a th:href="@{/attendance/list}">考勤管理</a></li>
                            </ul>
                        </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-palette"></i> 销售系统</a>
                            <ul class="nav nav-subnav">
                                <li><a th:href="@{/order/pageOrder}">订单信息管理</a></li>
                                <li><a th:href="@{/car/pageCar}">销售展示管理</a></li>
                            </ul>
                        </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-format-align-justify"></i>售后系统</a>
                            <ul class="nav nav-subnav">
                                <li><a th:href="@{/shopmaintain/doingmaintain}">维修商品信息</a></li>
                                <li><a th:href="@{/shopmaintain/getAllApply}">商品零件申请信息</a></li>
                                <li><a th:href="@{/shopmaintain/getAllApplyStateIs1}">所有已申请零件</a></li>
                            </ul>
                        </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-file-outline"></i>买卖订单</a>
                            <ul class="nav nav-subnav">
                                <li><a th:href="@{/car/carSystem}">购买管理</a></li>
                                <li><a th:href="@{/part/partSystem}">发送管理</a></li>

                            </ul>
                        </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-language-javascript"></i> 财务系统</a>
                            <ul class="nav nav-subnav">
                                <li><a th:href="@{/empSalary/showNowAllSalary}">收入综合管理</a></li>
                                <li><a th:href="@{/analyze/index}">收入综合分析</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>

                <div class="sidebar-footer">

                </div>
            </div>

        </aside>
        <!--End 左侧导航-->

        <!--头部信息-->
        <header class="lyear-layout-header">

            <nav class="navbar navbar-default">
                <div class="topbar">

                    <div class="topbar-left">
                        <div class="lyear-aside-toggler">
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                        </div>
                        <span class="navbar-page-title"> 维修商品信息 </span>
                    </div>

                    <ul class="topbar-right">
                        <li class="dropdown dropdown-profile">
                            <a href="javascript:void(0)" data-toggle="dropdown">
                                <img class="img-avatar img-avatar-48 m-r-10" th:src="@{/images/users/avatar.jpg}" alt="笔下光年"/>
                                <span>商城后台 <span class="caret"></span></span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a href="lyear_pages_profile.html"><i class="mdi mdi-account"></i> 个人信息</a></li>
                                <li><a href="lyear_pages_edit_pwd.html"><i class="mdi mdi-lock-outline"></i> 修改密码</a>
                                </li>
                                <li><a href="javascript:void(0)"><i class="mdi mdi-delete"></i> 清空缓存</a></li>
                                <li class="divider"></li>
                                <li><a href="/login"><i class="mdi mdi-logout-variant"></i> 退出登录</a>
                                </li>
                            </ul>
                        </li>
                        <!--切换主题配色-->
                        <li class="dropdown dropdown-skin">
                            <span data-toggle="dropdown" class="icon-palette"><i class="mdi mdi-palette"></i></span>
                            <ul class="dropdown-menu dropdown-menu-right" data-stopPropagation="true">
                                <li class="drop-title"><p>主题</p></li>
                                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="site_theme" value="default" id="site_theme_1" checked>
                    <label for="site_theme_1"></label>
                  </span>
                                    <span>
                    <input type="radio" name="site_theme" value="dark" id="site_theme_2">
                    <label for="site_theme_2"></label>
                  </span>
                                    <span>
                    <input type="radio" name="site_theme" value="translucent" id="site_theme_3">
                    <label for="site_theme_3"></label>
                  </span>
                                </li>
                                <li class="drop-title"><p>LOGO</p></li>
                                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="logo_bg" value="default" id="logo_bg_1" checked>
                    <label for="logo_bg_1"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_2" id="logo_bg_2">
                    <label for="logo_bg_2"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_3" id="logo_bg_3">
                    <label for="logo_bg_3"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_4" id="logo_bg_4">
                    <label for="logo_bg_4"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_5" id="logo_bg_5">
                    <label for="logo_bg_5"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_6" id="logo_bg_6">
                    <label for="logo_bg_6"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_7" id="logo_bg_7">
                    <label for="logo_bg_7"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_8" id="logo_bg_8">
                    <label for="logo_bg_8"></label>
                  </span>
                                </li>
                                <li class="drop-title"><p>头部</p></li>
                                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="header_bg" value="default" id="header_bg_1" checked>
                    <label for="header_bg_1"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_2" id="header_bg_2">
                    <label for="header_bg_2"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_3" id="header_bg_3">
                    <label for="header_bg_3"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_4" id="header_bg_4">
                    <label for="header_bg_4"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_5" id="header_bg_5">
                    <label for="header_bg_5"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_6" id="header_bg_6">
                    <label for="header_bg_6"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_7" id="header_bg_7">
                    <label for="header_bg_7"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_8" id="header_bg_8">
                    <label for="header_bg_8"></label>
                  </span>
                                </li>
                                <li class="drop-title"><p>侧边栏</p></li>
                                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="sidebar_bg" value="default" id="sidebar_bg_1" checked>
                    <label for="sidebar_bg_1"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_2" id="sidebar_bg_2">
                    <label for="sidebar_bg_2"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_3" id="sidebar_bg_3">
                    <label for="sidebar_bg_3"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_4" id="sidebar_bg_4">
                    <label for="sidebar_bg_4"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_5" id="sidebar_bg_5">
                    <label for="sidebar_bg_5"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_6" id="sidebar_bg_6">
                    <label for="sidebar_bg_6"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_7" id="sidebar_bg_7">
                    <label for="sidebar_bg_7"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_8" id="sidebar_bg_8">
                    <label for="sidebar_bg_8"></label>
                  </span>
                                </li>
                            </ul>
                        </li>
                        <!--切换主题配色-->
                    </ul>

                </div>
            </nav>

        </header>
        <!--End 头部信息-->


        <main class="lyear-layout-content">

            <div class="container-fluid">


                <div class="widget-box">

                    <div class="widget-content nopadding">
                        <a class="btn btn-primary " th:href="@{/shopmaintain/addShopMaintainPage}">增加</a>
                    </div>
                    <div class="widget-title"><span class="icon"><i class="icon-th"></i></span>
                        <h5>维修车辆信息</h5>
                    </div>
                    <div class="widget-content nopadding">
                        <table class="table table-bordered ">
                            <thead>
                            <tr>
                                <th>id</th>
                                <th>单号</th>
                                <th>收到时间</th>
                                <th>维修类型</th>
                                <th>商品号</th>
                                <th>类别</th>
                                <th>颜色</th>
                                <th>vin号</th>
                                <th>所属识别号</th>
                                <th>送修人</th>
                                <th>状态</th>
                                <th>工号</th>
                                <th>总费用</th>
                                <th>操作</th>
                                <th>零件申请</th>
                                <th>费用信息</th>
                            </tr>
                            </thead>
                            <tr th:each="one:${PageInfo.list}">
                                <td><input type="checkbox" name="id[]"
                                           th:text="${PageInfo.pageSize * (PageInfo.pageNum - 1) + oneStat.count}"
                                           th:value="${one.id}"/>
                                </td>
                                <td th:text="${one.carNumber}"></td>
                                <td th:text="${#dates.format(one.getTime,'yyyy-MM-dd HH:mm:ss')}"></td>
                                <td th:text="${one.maintainType}"></td>
                                <td th:text="${one.plateNumber}"></td>
                                <td th:text="${one.carType}"></td>
                                <td th:text="${one.color}"></td>
                                <td th:text="${one.vinNum}"></td>
                                <td th:text="${one.engineNumber}"></td>
                                <td th:text="${one.person}"></td>
                                <td>正在维修</td>
                                <td th:text="${one.jobNum}"></td>
                                <td th:text="${one.carAllmoney}"></td>
                                <td>
                                    <div class="button-group">

                                        <a class="button border-main"
                                           th:href="@{/shopmaintain/updateShopMaintainById(id=${one.id})}  "><span
                                                class="icon-edit"></span> 修改</a>


                                        <a class="button border-red" href="javascript:void(0)"
                                           th:onclick="del([[${one.id}]])">
                                            <span class="icon-trash-o"></span>删除</a>

                                    </div>
                                </td>
                                <td>
                                    <div class="button-group">

                                        <a class="button border-main"
                                           th:href="@{/shopmaintain/addApplyById(id=${one.id})}"><span
                                                class="icon-edit"></span> 申请零件</a>


                                        <a class="button border-red" href="javascript:void(0)"
                                           th:href="@{/shopmaintain/getApplyByCarId(id=${one.id})}">
                                            <span class="icon-trash-o"></span>查看申请</a>

                                    </div>
                                </td>
                                <td>
                                    <div class="button-group">

                                        <a class="button border-main"
                                           th:href="@{/shopmaintain/getMaintainMoneyByCarId(id=${one.id})}"><span
                                                class="icon-edit"></span>查看费用</a>

                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="15">
                                    <p align="center">当前第 <span th:text="${PageInfo.pageNum}"></span> 页,总 <span
                                            th:text="${PageInfo.pages}"></span> 页,共 <span
                                            th:text="${PageInfo.total}"></span> 条记录</p>
                                    <div class="pagelist" align="center">
                                        <a th:href="@{/shopmaintain/doingmaintain}">首页</a>
                                        <a th:href="@{/shopmaintain/doingmaintain(pageNum=${PageInfo.hasPreviousPage}?${PageInfo.prePage}:1)}">上一页</a>
                                        <a th:href="@{/shopmaintain/doingmaintain(pageNum=${PageInfo.hasNextPage}?${PageInfo.nextPage}:${PageInfo.pages})}">下一页</a>
                                        <a th:href="@{/shopmaintain/doingmaintain(pageNum=${PageInfo.pages})}">尾页</a>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>

                <div class="widget-box">
                    <div id="pie" style="width: auto;height:500px;"
                    >
                    </div>
                </div>
                <div class="widget-box">
                    <div id="pie02" style="width: auto;height:500px;"
                    >
                    </div>
                </div>
            </div>
        </main>

    </div>
</div>
</body>
<script th:inline="javascript">
    /**
     * 画饼图，主要用来画入郑、出郑行程时间统计
     * @param container 容器
     * @param legendData 菜单
     * @param seriesData 图表数据
     */
    var basePath = [[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]];

    function del(id) {
        if (confirm("您确定要删除吗?")) {
            $.ajax({
                url: basePath + '/shopmaintain/deleteShopMaintain',
                type: "post",
                data: {
                    "id": id
                },
                success: function (data) {
                    console.log("返回结果" + data);
                    if (data == 1) {
                        alert("删除成功");
                        /*load();*/
                        window.location.reload();
                    } else {
                        alert("删除失败");
                    }
                }
            });
        }
    }

    function load() {
        $.ajax({

            url: basePath + '/shopmaintain/getmaintainnum1',
            type: "POST",
            dataType: "json",
            success: function (data) {
                var list = [];
                var list2 = [];
                console.log("返回结果" + data);
                if (null == data) {
                    alert("维修类型数量查找失败");
                } else {
                    /* $.each(data.list, function (n, val) {
                         var name=val.maintainType;
                         list2.push(name);
                         var j=val.count;
                         list.push(j);
                     });*/
                    /*for (var i = 0; i < data.length; i++) {
                        var name = data[i].maintainType;
                        list2.push(name);
                        var j = data[i].count;
                        list.push(j);
                    }*/

                    var res = [];
                    $.each(data, function (key, v) {
                        res.push({
                            value: v.count,
                            name: v.maintainType
                        });
                    })
                    console.log("list2为" + list2);
                    console.log("list为" + list);
                    drawPie01("pie", res);


                }
            },
            error: function () {
                alert("维修类型数量请求出错");
            }
        })
    }


    load02();

    function load02() {
        $.ajax({
            url: basePath + '/shopmaintain/maintainperson',
            type: "POST",
            dataType: "json",
            success: function (data) {
                var list = [];
                var list2 = [];
                console.log("返回结果" + data);
                if (null == data) {
                    alert("维修人的维修数量获取失败");
                } else {
                    for (var i = 0; i < data.length; i++) {
                        var name = data[i].person;
                        list.push(name);
                        var j = data[i].count;
                        list2.push(j);
                    }
                    console.log("list2为" + list2);
                    console.log("list为" + list);
                    drawPie02("pie02", list, list2);
                }
            },
            error: function () {
                alert("维修人的维修数量请求出错");
            }
        })
    }


    function drawPie01(container, res) {
        var myChart = echarts.init(document.getElementById(container));
        var option;
        option = {
            backgroundColor: '#2c343c',
            /*以下可以设置图形在整个div中铺满*/
            grid: {
                left: 24, // 默认10%，给24就挺合适的。
                top: 24, // 默认60
                right: 24, // 默认10%
                bottom: 24, // 默认60
                width: '100%', // grid 组件的宽度。默认自适应。
                height: '100%',
                tooltip: {}, // 本坐标系特定的 tooltip 设定。(可以有多个grid)
            },

            title: {
                text: '每种维修类型的数量',
                left: 'center',
                top: 20,
                textStyle: {
                    color: '#ccc'
                }
            },

            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },

            visualMap: {
                show: false,
                min: 1,
                max: 15,
                inRange: {
                    colorLightness: [0, 0.6]
                }
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '75%',
                    center: ['50%', '50%'],
                    data: res
                        /*[
                            {value: j1, name: name1, itemStyle: {normal: {color: '#7FAE90'}}},
                            {value: j2, name: name2, itemStyle: {normal: {color: '#E98F6F'}}},
                            {value: j3, name: name3, itemStyle: {normal: {color: '#6ABDB8'}}}]*/.sort(function (a, b) {
                            return a.value - b.value;
                        }),
                    roseType: 'radius',
                    label: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    },
                    labelLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20
                    },
                    itemStyle: {
                        color: '#c23531',
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },

                    animationType: 'scale',
                    animationEasing: 'elasticOut',
                    animationDelay: function (idx) {
                        return Math.random() * 200;
                    }
                }
            ]
        };

        myChart.setOption(option);
    }

    function drawPie02(container, dataAxis, data) {
        var myChart = echarts.init(document.getElementById(container));

        var yMax = 20;
        var dataShadow = [];
        for (var i = 0; i < data.length; i++) {
            dataShadow.push(yMax);
        }
        var option;
        option = {
            title: {
                text: '维修人的维修数量，点击缩放',
                subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
            },
            xAxis: {
                data: dataAxis,
                axisLabel: {
                    //x轴不显示在图里面
                    /*inside: true,*/
                    textStyle: {
                        color: '#000'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                z: 10
            },
            yAxis: {
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#999'
                    }
                }
            },
            dataZoom: [
                {
                    type: 'inside'
                }
            ],
            series: [
                { // For shadow
                    type: 'bar',
                    itemStyle: {
                        color: 'rgba(0,0,0,0.05)'
                    },
                    barGap: '-100%',
                    barCategoryGap: '40%',
                    data: dataShadow,
                    animation: false,

                },
                {
                    type: 'bar',
                    itemStyle: {

                        //设置图上方显示数值
                        normal: {
                            label: {
                                show: true, //开启显示
                                position: 'top', //在上方显示
                                textStyle: { //数值样式
                                    color: 'black',
                                    fontSize: 16
                                }
                            }
                        },

                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#83bff6'},
                                {offset: 0.5, color: '#188df0'},
                                {offset: 1, color: '#188df0'}
                            ]
                        )
                    },
                    emphasis: {

                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#2378f7'},
                                    {offset: 0.7, color: '#2378f7'},
                                    {offset: 1, color: '#83bff6'}
                                ]
                            )
                        }
                    },
                    data: data
                }
            ]
        };

// Enable data zoom when user click bar.
        var zoomSize = 6;
        myChart.on('click', function (params) {
            console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
            myChart.dispatchAction({
                type: 'dataZoom',
                startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
                endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
            });
        });
        myChart.setOption(option);

    }

</script>
</html>
